<template>
    <div class="ticket">
        <div class="ticket-nav">
            <navigation :content='navContent' :parentWidth='navWidth'></navigation>
        </div>
        <div class="order-nav-content">
            <swiper :options="swiperOption" ref="mySwiper" >
                <swiper-slide>
                    <use-ticket></use-ticket>
                </swiper-slide>
                <swiper-slide>
                    <useless></useless>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
import navigation from '../../public/nav'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

import useless from './useless'
import useTicket from './useTicket'

export default {
    name:'ticket',
    data(){
        return{
            navContent:['可使用优惠券', '不可使用优惠券'],
            navWidth:734,
            swiperOption: {
                initialSlide:0,
                direction:'horizontal',
                loop: false,
                speed:300,
                autoHeight:true,
                on:{
                    slideChangeTransitionStart:() => {
                        let realIndex = this.swiperDetail;
                        this.$store.state.homeTabIndex = realIndex;
                    }
                }
            }
        }
    },
    mounted(){
        this.$store.state.tab = '优惠券';
    },
    activated(){
        this.$store.state.tab = '优惠券';
    },
    computed:{
        swiperDetail() {
            return this.$refs.mySwiper.swiper.realIndex;
        },
        nowPage(){
            return this.$store.state;
        }
    },
    components:{
        navigation,
        swiper,
        swiperSlide,
        useless,
        useTicket
    }
}
</script>

<style lang='less'>
@rem:100rem;

.ticket{
    width: 750/@rem;
    margin-top: 158/@rem;
    .ticket-nav{
        width: 100%;
        box-sizing: border-box;
        padding: 0 8/@rem;
        background: #ffffff;
        position: fixed;
        left: 0;
        top: 88/@rem;
        z-index: 99;
        
    }
    .swiper-wrapper{
            height: auto;
        }
    .swiper-slide{
        height: auto;
    }
}

</style>
